<template>
  <div id="home">
    <nav-bar></nav-bar>

    <home-banner :BannerImg="BannerImg"></home-banner>
    <grid-class :GridList="GridList"></grid-class>
    <idea-date :IdeaDate="IdeaDate"></idea-date>
    <edit-recom :EditRecom="EditRecom"></edit-recom>
    <new-program :NewProgram="NewProgram"></new-program>
    <play-list-recom :PlayListRecom="PlayListRecom"></play-list-recom>
    <daily-frase :DailyFrase="DailyFrase"></daily-frase>
    <recent-update :RecentUpdate="RecentUpdate"></recent-update>
    <daily-list :DailyList="DailyList"></daily-list>
    <today-free :TodayFree="TodayFree"></today-free>
    <akapela-recomm :AkapelaRecomm="AkapelaRecomm"></akapela-recomm>
    <load-more :LoadMore="LoadMore"></load-more>
  </div>
</template>

<script>
import { homeAll } from "../api/request";
import NavBar from "@/components/HomeView/NavBar.vue";
import HomeBanner from "@/components/HomeView/HomeBanner.vue";
import GridClass from "@/components/HomeView/GridClass.vue";
import IdeaDate from "@/components/HomeView/IdeaDate.vue";
import EditRecom from "@/components/HomeView/EditRecom.vue";
import NewProgram from "@/components/HomeView/NewProgram.vue";
import PlayListRecom from "../components/HomeView/PlayListRecom.vue";
import DailyFrase from "../components/HomeView/DailyFrase.vue";
import RecentUpdate from "../components/HomeView/RecentUpdate.vue";
import DailyList from "../components/HomeView/DailyList.vue";
import TodayFree from "@/components/HomeView/TodayFree.vue";
import AkapelaRecomm from "@/components/HomeView/AkapelaRecomm.vue";
import LoadMore from "@/components/HomeView/LoadMore.vue";
export default {
  name: "HomeView",
  components: {
    NavBar,
    HomeBanner,
    GridClass,
    IdeaDate,
    EditRecom,
    NewProgram,
    PlayListRecom,
    DailyFrase,
    RecentUpdate,
    DailyList,
    TodayFree,
    AkapelaRecomm,
    LoadMore,
  },
  data() {
    return {
      BannerImg: [],
      GridList: [],
      IdeaDate: [],
      EditRecom: [],
      NewProgram: [],
      PlayListRecom: [],
      DailyFrase: [],
      RecentUpdate: [],
      DailyList: [],
      TodayFree: [],
      AkapelaRecomm: [],
      LoadMore: [],
    };
  },
  beforeMount() {
    this.getHome();
  },
  methods: {
    async getHome() {
      await homeAll().then(({ data }) => {
        data = data.data;
        // console.log(data);
        // 轮播图
        this.BannerImg = data[0].data;
        // console.log(this.BannerImg);
        // 宫格分类
        this.GridList = data[1].data;
        // console.log(this.GridList);
        // 观念日历
        this.IdeaDate = data[2].data[0];
        // console.log(this.IdeaDate);
        // 编辑推荐
        this.EditRecom = data[3].data[0];
        // 节目上新
        this.NewProgram = data[4].data[0];
        // console.log(this.NewProgram);
        // 播单推荐
        this.PlayListRecom = data[5].data[0];
        // 每日金句
        this.DailyFrase = data[6].data[0];
        // 最近更新
        this.RecentUpdate = data[7].data[0];
        // console.log(this.RecentUpdate);
        // 今日榜单
        this.DailyList = data[8].data;
        // console.log(this.DailyList);
        // 今日限免
        this.TodayFree = data[9].data[0];
        // 合辑推荐
        this.AkapelaRecomm = data[10].data[0];
        // console.log(this.AkapelaRecomm);
        this.LoadMore = data[11];
        // console.log(this.LoadMore);
      });
    },
  },
};
</script>

<style lang="scss" >
#home {
  padding: 0 0.875rem;

  .homeModule-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      color: var(--fontcolor);
      font-size: 0.75rem;
      display: flex;
    }
    padding: 0.625rem 0;
  }
}
</style>
